<template>
  <div class="Light">
  	<Map ref="map"></Map>
  	<div class="Light_header">
  		<div class="title">智慧路灯实时信息</div>
  		<div class="btns">
  			<el-button type="warning" plain>首页</el-button>
  			<el-button type="primary" plain @click="$router.push('/count')">统计分析</el-button>
  		</div>
  	</div>
  	<div class="allPower">
  		<div class="title">今日用电</div>
  		<div class="clock">
  			<ChartGaugeQ
  			ref="Chart3"
  			:seriesData="seriesData3"
  			:axisLineColor="axisLineColor3"
  			:splitNumber="80"
  			:dataMax="3000"
  			:bgcImg="'power.png'"
  			></ChartGaugeQ>
  		</div>
  		<div class="desc">用电估算：<span class="num">333.23</span>kw/h</div>
  	</div>
  	<div class="passPower">
  		<div class="title">历史能耗统计</div>
  		<div class="Chart">
  			<barChart
  			ref="Chart1"
  			:legendData="legendData1"
  			:xAxisData="xAxisData1"
  			:seriesDatas="seriesDatas1"
  			:gridTop="10"
  			:gridBottom="40"
  			:YaxisLabelColor="'#000'"
  			:XaxisLabelColor="'#000'"
  			:xAxisInterval="1"
  			></barChart>
  		</div>
  		<div class="title">故障预警</div>
  		<div class="Chart">
  			<LineChart
			ref="Chart2"
			:legendData="legendData2"
			:titleFontSize="12"
			:gridTop="10"
			:gridBottom="40"
			:seriesDatas="seriesDatas2"
			:xAxisType="'time'"
			:xInterval="1000 * 60 * 60 * 3"
			:xAxisMin="new Date(new Date().getFullYear(), 9, 15, 0, 0, 0)"
			:xAxisMax="new Date(new Date().getFullYear(), 9, 15, 23, 0, 0)"></LineChart>
  		</div>
  	</div>
	
	<transition name="lightCL">
	  	<div class="mask" v-show="isShowLightCtrl" @click="closelightCL">
	  		<div class="lightCL" @click.stop>
				<div class="title">路灯控制<span class="el-icon-circle-close" @click="closelightCL"></span></div>
				<div class="content">
					<div class="content_CL">
						<div class="content_CL_item">
							<span>路灯：</span>
							<span class="switchBtn">
								<el-switch
								  v-model="switch1"
								  active-color="#13ce66"
								  inactive-color="#ff4949"
								  active-text="开"
								  inactive-text="关">
								</el-switch>
							</span>
						</div>
						<div class="content_CL_item">
							<span>路灯亮度调节：</span>
							<span>
								<span class="icon el-icon-caret-left" @click="decreaseLL"></span>
								{{lightLevel}}
								<span class="icon el-icon-caret-right" @click="increaseLL"></span>
							</span>
						</div>
						<div class="content_CL_item">
							<span>充电桩：</span>
							<span class="switchBtn">
								<el-switch
								  v-model="switch2"
								  active-color="#13ce66"
								  inactive-color="#ff4949"
								  active-text="开"
								  inactive-text="关">
								</el-switch>
							</span>
						</div>
					</div>
				</div>
	  		</div>
	  	</div>
  	</transition>
  </div>
</template>
<script>
	import LineChart from '../../components/base-ChartLine.vue'
	import barChart from '../../components/base-ChartBar.vue'
	import Map from '../../components/Map.vue'
	import ChartGaugeQ from '../../components/base-ChartGaugeQ.vue'

	export default {
		components: {
			Map,
			barChart,
			LineChart,
			ChartGaugeQ,
		},
		data() {
			return {
				//地图标记点经纬度
				points: [{x: 116.872757,y: 28.245192},{x: 116.873385,y: 28.245892}],

				// 柱状图
				legendData1: ['历史能耗'],
				xAxisData1: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
				seriesDatas1: [{
					name: '历史能耗',
					value: [2,5,1,6,9,8,4,7,2,3,6,1,7,2,3,6,3,6,5,1,2,4,8,4],
					type: 'bar',
					color: '#b018ff',
				}],

				// 折线图
				legendData2: ['预警次数'],
				seriesDatas2: [{
					name: '预警次数',
					value: [
						['2019/10/15 0:00:00',1],['2019/10/15 1:00:00',3],['2019/10/15 2:00:00',5],['2019/10/15 3:00:00',7],['2019/10/15 4:00:00',5],['2019/10/15 5:00:00',5],['2019/10/15 6:00:00',3],['2019/10/15 7:00:00',2],['2019/10/15 8:00:00',2],['2019/10/15 9:00:00',6],['2019/10/15 10:00:00',5],['2019/10/15 11:00:00',3],['2019/10/15 12:00:00',3],['2019/10/15 13:00:00',1],['2019/10/15 14:00:00',2],['2019/10/15 15:00:00',3],['2019/10/15 16:00:00',4],['2019/10/15 17:00:00',7],['2019/10/15 18:00:00',6],['2019/10/15 19:00:00',4],['2019/10/15 20:00:00',3],['2019/10/15 21:00:00',5],['2019/10/15 22:00:00',3],['2019/10/15 23:00:00',1]],
					type: 'line',
					color: 'rgba(239, 87, 119,1.0)',
				}],

				//是否显示路灯控制
				isShowLightCtrl: false,
				switch1: false,
				switch2: false,
				
				//路灯亮度等级
				lightLevel: 1,

				//今日用电
				seriesData3: [{value: 1330,name: '用电量'}],
				axisLineColor3: [[0.2, '#4ed765'],[0.4, '#86d34c'],[0.6, '#d7c525'],[0.8, '#fb9508'],[1, '#ff0000']],
			}
		},
		mounted() {
			let _this = this
			this.$nextTick(() => {
				this.points.forEach(item => {
					this.$refs.map.addMarker(item.x,item.y,[
						{
							fnType: 'click',
							fn(type) {
								let map = type.target.map
								let marker = type.currentTarget
								let lng = type.currentTarget.point.lng
								let lat = type.currentTarget.point.lat

								// map.panBy(-100, 0)

								_this.showLC()
							}
						},
						{
							fnType: 'mouseover',
							fn(type) {
								let map = type.target.map
								let marker = type.currentTarget
								let lng = type.currentTarget.point.lng
								let lat = type.currentTarget.point.lat
								
								let police1 = type.currentTarget
								let infoDom = `<div class="lightMsg">
												  	<div class="item">
														<span>编号:</span>
														<span>HSC100800</span>
												  	</div>
												  	<div class="item">
														<span>使用状态:</span>
														<span>正常</span>
												  	</div>
													<div class="item">
														<span>开关状态:</span>
														<span>开</span>
													</div>
													<div class="item">
														<span>亮度等级:</span>
														<span>2</span>
													</div>
													<div class="item">
														<span>累计用电量:</span>
														<span>0.648kw</span>
													</div>
													<div class="item">
														<span>充电桩剩余电量:</span>
														<span>2689w</span>
													</div>
												</div>`
								// 创建信息窗口对象 
								let info = new BMap.InfoWindow(infoDom,{
									offset: {width: 0,height: -20}
								})
								map.openInfoWindow(info,new BMap.Point(lng,lat)) //开启信息窗口
							}
						},
						{
							fnType: 'mouseout',
							fn(type) {
								let map = type.target.map
								map.closeInfoWindow()
							}
						}
					])
				})
			})
			window.addEventListener('resize', this.resize)
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.resize)
		},
		methods: {
			//显示路灯控制
			showLC() {
				this.isShowLightCtrl = true
			},
			//关闭路灯控制
			closelightCL(){
				this.isShowLightCtrl = false
			},
			//调亮路灯
			increaseLL() {
				if(this.switch1 == false) {
					this.$message({
			          message: '请先打开路灯',
			          type: 'warning'
			        });
					return
				}
				if(this.lightLevel<4) {
					this.lightLevel++
				}
			},
			//调暗路灯
			decreaseLL() {
				if(this.switch1 == false) {
					this.$message({
			          message: '请先打开路灯',
			          type: 'warning'
			        });
					return
				}
				if(this.lightLevel>1) {
					this.lightLevel--
				}
			},
		}
	}
</script>
<style>
	/* 过渡时的样式和时间 */
	.lightCL-enter-active, .lightCL-leave-active {
		transition: all .4s;
	}
	/* 进入前/消失后的样式 */
	.lightCL-enter, .lightCL-leave-to {
		opacity: 0;
	}
	.Light {
		overflow: hidden;
		height: 100%;
		position: relative;
	}
	.Light .mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0,.1);
		position: fixed;
		top: 0;
		left: 0;
		text-align: center;
	}
	.Light .mask:after {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	.Light .mask .lightCL {
		display: inline-block;
		vertical-align: middle;
		text-align: left;
		width: 300px;
		height: 200px;
		border-radius: 3px;
		overflow: hidden;
		box-shadow: 2px;
	}
	.Light .mask .lightCL > .title {
		height: 30px;
		line-height: 30px;
		color: #fff;
		padding-left: 10px;
		background-color: rgba(42, 88, 173,.9);
		position: relative;
	}
	.Light .mask .lightCL > .title > .el-icon-circle-close {
		position: absolute;
		right: 5px;
		height: 30px;
		line-height: 30px;
		font-size: 23px;
		cursor: pointer;
	}
	.Light .mask .lightCL > .content {
		height: calc(100% - 30px);
		background-color: #fff;
		text-align: center;
	}
	.Light .mask .lightCL > .content:after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}
	.Light .mask .lightCL > .content > .content_CL {
		display: inline-block;
		vertical-align: middle;
		text-align: left;
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item {
		overflow: hidden;
		height: 30px;
		line-height: 30px;
		width: 200px;
		font-size: 17px;
		user-select: none;
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item .icon {
		cursor: pointer;
		font-size: 20px;
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item .icon:hover {
		color: rgba(42, 88, 173,.9);
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item > .switchBtn {
		margin-right: 10px;
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item > .switchBtn .el-switch__label {
		position: absolute;
		display: none;
		color: #fff;
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item > .switchBtn .el-switch__label--right {
		z-index: 1;
		right: 20px;
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item > .switchBtn .el-switch__label--left {
		z-index: 1;
		left: 20px;
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item > .switchBtn .el-switch__label.is-active {
		display: block;
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item span {
		
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item > span:nth-child(1) {
		float: left;
		display: inline-block;
		height: 30px;
		line-height: 30px;
	}
	.Light .mask .lightCL > .content > .content_CL > .content_CL_item > span:nth-child(2) {
		float: right;
		display: inline-block;
		height: 30px;
		line-height: 30px;
	}
	.Light_header {
		background-color: rgba(42, 88, 173,.9);
		height: 50px;
		width: 100%;
		position: absolute;
		top: 0;
	}
	.Light_header .btns {
		float: right;
		height: 100%;
		vertical-align: middle;
		margin-right: 150px;
	}
	.Light_header .btns:after {
		content: '';
		height: 100%;
		display: inline-block;
		vertical-align: middle;
	}
	.Light_header .title {
		color: #fff;
		font-size: 25px;
		display: inline-block;
		height: 50px;
		line-height: 50px;
		margin-left: 20px;
	}
	.allPower {
		width: 320px;
		height: 260px;
		background: rgba(220, 221, 225,.5);
		border-radius: 3px;
		position: absolute;
		top: 55px;
		left: 10px;
	}
	.allPower > .title {
		color: rgba(9, 132, 227,1.0);
		text-align: center;
		height: 40px;
		line-height: 40px;
	}
	.allPower > .clock {
		height: calc(100% - 80px);
	}
	.allPower > .desc {
		color: rgba(9, 132, 227,1.0);
		text-align: center;
	}
	.allPower > .desc > .num {
		height: 40px;
		line-height: 40px;
		font-size: 25px;
		color: rgba(251, 197, 49,1.0);
	}
	.passPower {
		width: 320px;
		height: 500px;
		background: rgba(220, 221, 225,.5);
		border-radius: 3px;
		position: absolute;
		top: 55px;
		right: 10px;
	}
	.passPower > .title {
		color: rgba(9, 132, 227,1.0);
		text-align: center;
		height: 40px;
		line-height: 40px;
	}
	.passPower > .Chart {
		height: calc(50% - 40px);
	}
	.lightMsg > .item > span:nth-child(1) {
		margin-right: 10px;
	}
	.lightMsg > .item > span:nth-child(2) {
		color: #909399;
	}
















	.Light .el-tabs__item {
		font-size: 17px;
	}
	.Chart-wrapper {
		width: 100%;
		height: 400px;
		background-color: #ccc;
	}
	.Light .el-tab-pane .title {
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		font-weight: 800;
		color: #4395e9;
	}
	.lightControl .el-row {
		padding: 10px;
	}
	.lightC_item {
		border-radius: 3px;
		margin-bottom: 5px;
		border: 1px solid #909399;
		background-color: #F2F6FC;
	}
	.lightC_item_active {
		border: 1px solid #2ad579!important;
	}
	.lightC_item:hover {
		box-shadow: 0px 0px 6px #2ad579;
	}
	.lightC_item_title {
		color: #C0C4CC;
		font-size: 13px;
		border-bottom: 1px solid #909399;
		padding: 0 10px;
		height:25px;
		line-height:25px;
		display: flex;
		justify-content: space-between;
	}
	.lightC_item_title_active {
		color: #000;
		border-bottom: 1px solid #2ad579!important;
	}
	.lightC_item_content {
		display:flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
	}
	.lightC_item .lightC_item_content_left {
		font-size: 14px;
		line-height: 10px;
		display: flex;
		align-items: center;
	}
	.lightC_item .lightC_item_content_left i {
		color: #C0C4CC;
		font-size: 50px;
		margin-right: 10px;
	}
	.activeLight1 {
		color: #2ad579!important;
	}
	.lightC_item .lightC_item_content_desc {
		min-width: 131px;
		color: #C0C4CC;
		user-select: none;
	}
	.activeLight2 {
		color: #000!important;
	}
	.lightC_item .lightC_item_content_btn {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lightC_item_content_desc .icon {
		font-size: 20px;
		vertical-align: middle;
	}
	.lightC_item_content_desc .icon:hover {
		color: #2ad579!important;
		cursor: pointer;
	}
</style>
